<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { ElDatePicker, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus'
import * as XLSX from 'xlsx'

// 顶部筛选
const dateRange = ref([
  '2021-03-13',
  '2021-04-12',
])

// 商品概况卡片数据
const overviewList = ref([
  { label: '商品总数', value: '6,030', trend: -10 },
  { label: '活动商品数', value: '856', trend: -10 },
  { label: '销售库存', value: '2,344', trend: -10 },
])

// 分类分布饼图数据
const categoryData = ref([
  { name: '时令果蔬', value: 1339 },
  { name: '新鲜蛋类', value: 1099 },
  { name: '肉禽水产', value: 1094 },
  { name: '粮油调味', value: 889 },
  { name: '酒水饮料', value: 450 },
  { name: '乳品烘焙', value: 381 },
  { name: '日用百货', value: 250 },
  { name: '个护清洁', value: 212 },
  { name: '生鲜冻品', value: 211 },
  { name: '其他', value: 189 },
])

// 销售排行数据
const rankTab = ref('amount')
const rankData = ref({
  amount: [
    { name: '时令果蔬', value: 1339 },
    { name: '新鲜蛋类', value: 1099 },
    { name: '肉禽水产', value: 1094 },
    { name: '粮油调味', value: 889 },
    { name: '酒水饮料', value: 450 },
    { name: '乳品烘焙', value: 381 },
    { name: '日用百货', value: 250 },
    { name: '个护清洁', value: 212 },
    { name: '生鲜冻品', value: 211 },
    { name: '其他', value: 189 },
  ],
  order: [
    { name: '时令果蔬', value: 900 },
    { name: '新鲜蛋类', value: 800 },
    { name: '肉禽水产', value: 700 },
    { name: '粮油调味', value: 600 },
    { name: '酒水饮料', value: 500 },
    { name: '乳品烘焙', value: 400 },
    { name: '日用百货', value: 300 },
    { name: '个护清洁', value: 200 },
    { name: '生鲜冻品', value: 150 },
    { name: '其他', value: 100 },
  ]
})

// 商品增长表格数据
const growthTable = ref([
  { date: '2025-03-21', stock: 690, trend: -10, active: '6,274', total: '19,206' },
  { date: '2025-03-20', stock: 500, trend: -10, active: '6,252', total: '19,061' },
  { date: '2025-03-19', stock: 500, trend: -10, active: '6,221', total: '18,914' },
  { date: '2025-03-18', stock: 500, trend: -10, active: '6,205', total: '18,892' },
])
const growthTotal = ref(50)
const growthPage = ref(1)
const growthPageSize = ref(10)
const handleSizeChange = (size) => { growthPageSize.value = size }
const handlePageChange = (page) => { growthPage.value = page }

// 图表渲染
const renderCharts = () => {
  // 分类分布饼图
  const pie = echarts.init(document.getElementById('categoryPie'))
  pie.setOption({
    tooltip: { trigger: 'item' },
    legend: { left: 'right', top: 'center', orient: 'vertical' },
    series: [{
      name: '分类分布',
      type: 'pie',
      radius: '70%',
      center: ['35%', '50%'],
      data: categoryData.value,
      label: { formatter: '{b}\n{c}' },
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.2)' }
      }
    }]
  })
  // 销售排行条形图
  const bar = echarts.init(document.getElementById('rankBar'))
  bar.setOption({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { show: false },
    grid: { left: 60, right: 20, top: 20, bottom: 20 },
    xAxis: { type: 'value', boundaryGap: [0, 0.01] },
    yAxis: {
      type: 'category',
      data: rankData.value[rankTab.value].map(i => i.name)
    },
    series: [{
      type: 'bar',
      data: rankData.value[rankTab.value].map(i => i.value),
      itemStyle: {
        color: rankTab.value === 'amount' ? '#409EFF' : '#67C23A',
        borderRadius: [0, 8, 8, 0]
      },
      barWidth: 18
    }]
  })
}

const handleExport = () => {
  const ws = XLSX.utils.json_to_sheet(growthTable.value)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '商品增长')
  XLSX.writeFile(wb, '商品增长数据.xlsx')
}

onMounted(() => {
  setTimeout(renderCharts, 100)
})
watch(rankTab, () => setTimeout(renderCharts, 100))
</script>

<template>
  <div class="product-analysis">
    <!-- 顶部标题与筛选 -->
    <div class="page-header">
      <div class="header-title">商品分析</div>
      <div class="header-filter">
        <span class="filter-label">数据筛选：</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          style="width: 260px;"
        />
      </div>
    </div>

    <!-- 商品概况卡片 -->
    <div class="overview-cards">
      <div class="card" v-for="item in overviewList" :key="item.label">
        <div class="card-value">{{ item.value }}</div>
        <div class="card-label">{{ item.label }}</div>
        <div class="card-trend" :class="item.trend < 0 ? 'negative' : 'positive'">
          <span>{{ item.trend > 0 ? '+' : '' }}{{ item.trend }}%</span>
        </div>
      </div>
    </div>

    <!-- 分类数据 -->
    <div class="category-section">
      <div class="category-left">
        <div class="section-header">
          <span>分类分布</span>
          <el-button size="small" type="primary" plain icon="el-icon-download">导出</el-button>
        </div>
        <div id="categoryPie" class="chart-pie"></div>
      </div>
      <div class="category-right">
        <div class="section-header">
          <span>销售排行</span>
          <el-button size="small" type="primary" plain icon="el-icon-download">导出</el-button>
        </div>
        <div class="tab-bar">
          <span :class="{'active': rankTab==='amount'}" @click="rankTab='amount'">销售金额</span>
          <span :class="{'active': rankTab==='order'}" @click="rankTab='order'">销售订单</span>
        </div>
        <div id="rankBar" class="chart-bar"></div>
      </div>
    </div>

    <!-- 商品增长表格 -->
    <div class="growth-section">
      <div class="section-header">
        <span>商品增长</span>
        <el-button size="small" type="primary" plain icon="el-icon-download" @click="handleExport">导出</el-button>
      </div>
      <el-table :data="growthTable" border stripe style="width: 100%;">
        <el-table-column prop="date" label="时间" min-width="120" />
        <el-table-column prop="stock" label="销售库存" min-width="100" />
        <el-table-column prop="trend" label="销售同比" min-width="100">
          <template #default="scope">
            <span :class="scope.row.trend < 0 ? 'down' : 'up'">
              <i v-if="scope.row.trend < 0" class="el-icon-bottom"></i>
              <i v-else class="el-icon-top"></i>
              {{ Math.abs(scope.row.trend) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="active" label="活动商品" min-width="100" />
        <el-table-column prop="total" label="商品总数" min-width="100" />
      </el-table>
      <div class="table-footer">
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="growthTotal"
          :page-size="growthPageSize"
          :current-page="growthPage"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :page-sizes="[10, 20, 50]"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.product-analysis {
  padding: 24px 24px 40px 24px;
  background: #f7f8fa;
  min-height: 100vh;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
}
.header-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-label {
  color: #888;
  font-size: 14px;
}
.overview-cards {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
}
.card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 24px 0 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.card-value {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.card-label {
  font-size: 15px;
  color: #888;
  margin-bottom: 8px;
}
.card-trend {
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  right: 18px;
  top: 18px;
}
.card-trend.positive { color: #67c23a; }
.card-trend.negative { color: #f56c6c; }
.category-section {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
}
.category-left, .category-right {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 24px 18px 24px;
  display: flex;
  flex-direction: column;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
}
.chart-pie {
  width: 100%;
  height: 260px;
}
.chart-bar {
  width: 100%;
  height: 260px;
  margin-top: 12px;
}
.tab-bar {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.tab-bar span {
  font-size: 14px;
  color: #888;
  cursor: pointer;
  padding: 2px 12px;
  border-radius: 16px;
  transition: background 0.2s, color 0.2s;
}
.tab-bar .active {
  background: #409eff;
  color: #fff;
}
.growth-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 24px 12px 24px;
}
.table-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
@media (max-width: 1000px) {
  .overview-cards, .category-section { flex-direction: column; gap: 16px; }
  .category-left, .category-right { padding: 12px; }
}
</style>